<template>
	<view class="personal">
		<image class="personal-tipBg"
			src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/supervise-tipsBg.png" alt="">
		</image>
		<view class="personal-info ff-border-radius-5 ff-flex-between ff-align-items-one">
			<view class="ff-align-items-one">
				<image class="personal-info-user"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/supervise-user.png" alt="">
					<view class="ff-margin-left-12">
				</image>
				<view class="ff-font-16 ff-margin-bottom-10">{{superviseInfo.username}}{{superviseInfo.phone}}</view>
				<view class="ff-font-13 ff-color-999">{{superviseInfo.departmentName}}</view>
			</view>
		</view>
	</view>
	<view @click="complaintClick"
		class="personal-icon ff-border-radius-5 ff-flex-between ff-margin-left-12 ff-margin-right-12 ff-padding-15 ff-solid-bottom">
		<view class="ff-align-items-one">
			<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/complaintIcon.png" mode="">
			</image>
			<view class="ff-font-14 ff-color-333 ff-margin-left-5">投诉建议</view>
		</view>
		<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
	</view>
	<view class="personal-info-but" @click="exitClick">退出登录</view>
	<u-toast ref="uToast" />
	<f-loading ref="loading" />
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				superviseInfo: {}
			}
		},
		methods: {
			...mapMutations(['changeTabberIndex', 'setUserInfo']),
			// 实时刷新
			showLoading() {
				this.getSuperviseUserInfo(); // 获取个人信息
			},
			// 下拉刷新
			downLoading() {
				let that = this;
				this.getSuperviseUserInfo(); // 获取个人信息
				setTimeout(() => {
					// that.$refs.uToast.show({
					// 	title: '刷新成功',
					// 	type: 'success'
					// });
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 获取监管个人信息
			async getSuperviseUserInfo() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/supervise/superviseUserInfo'
				});
				// console.log('获取监管个人信息----', data.data);
				this.$refs.loading.closeLoading();
				if (data.code == 200) {
					this.superviseInfo = data.data;
					// console.log(this.superviseInfo)
					this.setUserInfo(data.data);
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 跳转到投诉建议
			complaintClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/complaintsSuggestions/index');
			},
			// 退出
			exitClick() {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '请确认是否退出登录？',
					confirmColor: '#3178FF',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.$refs.loading.openLoading('退出中···'); // 打开loading动画
							that.$http.post({
								url: '/logout'
							}).then(res => {
								// console.log('退出操作返回的数据-----', res);
								that.$refs.loading.closeLoading();
								if (res.code == 200 && res.success) {
									that.changeTabberIndex(0); // 底部导航栏Index默认为0
									uni.clearStorageSync(); // 清空本地所有的缓存数据
									that.$refs.uToast.show({
										title: '退出成功',
										type: 'success'
									});
									that.$pageJump.reLaunch('/pages/loginRegister/login/Login');
								} else {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'error'
									});
								}
							});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal {
		&-tipBg {
			width: 100%;
			height: 300rpx;
		}

		&-icon {
			background-color: #F4F8FF;
			margin-top: -115rpx;

			image {
				width: 34rpx;
				height: 34rpx;
				padding-bottom: 4rpx;
			}
		}

		&-info {
			margin: 24rpx;
			background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/supervise-userBg.png') no-repeat;
			background-size: 100%;
			height: 240rpx;
			position: relative;
			top: -90rpx;
			z-index: 9;
			padding: 30rpx;

			&-user {
				width: 120rpx;
				height: 120rpx;
			}



			&-but {
				padding: 30rpx 40rpx;
				border-radius: 15rpx;
				background: #3178FF;
				color: #fff;
				text-align: center;
				width: 80%;
				margin: 10%;
				position: fixed;
				bottom: 15%;
			}
		}
	}
</style>